<template>
  <div class="approve-detail">
    <t-card title="基础信息" :bordered="false" class="detail-card ">
      <t-descriptions :column="2">
        <t-descriptions-item label="学校名称">
          <span slot="content">{{ info.name }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="联系人">
          <span slot="content">{{ info.linkman }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="手机号">
          <span slot="content">{{ info.phone }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="身份证号">
          <span slot="content">{{ info.id_card_no }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="用户区域">
          <span slot="content">{{ info.province }}/{{ info.city }}/{{ info.area }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="用户地址">
          <span slot="content">{{ info.address }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="审批状态">
              <span slot="content" :class="[
                {'danger': info.is_agent === -1},
                {'success': info.is_agent === 1},
                {'warning': info.is_agent === 100},
                {'warning': info.is_agent === 101},
                {'warning': info.is_agent === 102},
                {'warning': info.is_agent === 103},
              ]">
                <i></i>
                <!-- 审核：-1 驳回；0 待审；1 已审 -->
                <span v-if="info.is_agent === -1">已驳回</span>
                <span v-if="info.is_agent === 1">已审核</span>
                <span v-if="info.is_agent === 100">未付款订金</span>
                <span v-if="info.is_agent === 101">审核中</span>
                <span v-if="info.is_agent === 102">已审待激活</span>
                <span v-if="info.is_agent === 103">已禁用</span>
              </span>
        </t-descriptions-item>
        <t-descriptions-item label="是否为社团">
          <span slot="content">{{ info.is_club_card === 1 ? '是' : '否' }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="备注说明">
          <span slot="content">{{ info.remark ? info.remark : '无' }}</span>
        </t-descriptions-item>
        <!--<t-descriptions-item label="企业微信二维码">-->
        <!--  <upload-img module="product" :value="formData.qrcode ? [{url: formData.qrcode}] : []" @success="handleSuccess($event, 'qrcode')" @remove="handleRemove($event, 'qrcode')"></upload-img>-->
        <!--</t-descriptions-item>-->
      </t-descriptions>
    </t-card>
    <t-card title="证件资料" :bordered="false" class="detail-card mt24">
      <t-descriptions :column="2">
        <t-descriptions-item label="身份证">
              <span slot="content">
                <div class="img-list">
                  <t-image-viewer v-for="(item, index) in info.identity_card_data" :default-index="index"
                                  :images="info.identity_card_data" :closeOnEscKeydown="false">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                        <p class="prod-img2">
                          <img alt="" :src="item"/>
                        </p>
                        <div class="tdesign-demo-image-viewer__ui-image--hover">
                          <span><browse-icon size="1.4em"/> </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </span>
        </t-descriptions-item>
        <t-descriptions-item label="学生证">
              <span slot="content">
                <div class="img-list">
                  <t-image-viewer v-for="(item, index) in info.student_card_data" :default-index="index"
                                  :images="info.student_card_data" :closeOnEscKeydown="false">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                        <p class="prod-img2">
                          <img alt="" :src="item"/>
                        </p>
                        <div class="tdesign-demo-image-viewer__ui-image--hover">
                          <span><browse-icon size="1.4em"/> </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </span>
        </t-descriptions-item>
        <t-descriptions-item label="资产证明">
              <span slot="content">
                <div class="img-list">
                  <t-image-viewer v-for="(item, index) in info.asset_certificate_data" :default-index="index"
                                  :images="info.asset_certificate_data" :closeOnEscKeydown="false">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                        <p class="prod-img2">
                          <img alt="" :src="item"/>
                        </p>
                        <div class="tdesign-demo-image-viewer__ui-image--hover">
                          <span><browse-icon size="1.4em"/> </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </span>
        </t-descriptions-item>
        <t-descriptions-item label="征信报告">
            <span slot="content">
              <div class="img-list">
                <t-image-viewer v-for="(item, index) in info.credit_report_data" :default-index="index"
                                :images="info.credit_report_data" :closeOnEscKeydown="false">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                      <p class="prod-img2">
                        <img alt="" :src="item"/>
                      </p>
                      <div class="tdesign-demo-image-viewer__ui-image--hover">
                        <span><browse-icon size="1.4em"/> </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </div>
            </span>
        </t-descriptions-item>
        <t-descriptions-item v-if="info.is_club_card" label="社团证">
              <span slot="content">
                <div class="img-list">
                  <t-image-viewer v-for="(item, index) in info.club_card_data" :default-index="index"
                                  :images="info.club_card_data" :closeOnEscKeydown="false">
                    <template #trigger="{ open }">
                      <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                        <p class="prod-img2">
                          <img alt="" :src="item"/>
                        </p>
                        <div class="tdesign-demo-image-viewer__ui-image--hover">
                          <span><browse-icon size="1.4em"/> </span>
                        </div>
                      </div>
                    </template>
                  </t-image-viewer>
                </div>
              </span>
        </t-descriptions-item>
      </t-descriptions>
    </t-card>
  </div>
</template>

<script>
import {BrowseIcon, IconFont} from "tdesign-icons-vue";
import UploadImg from "@/components/upload-img/index.vue";
import {agentEditApi} from "@/api/agent";

export default {
  name: 'BaseInfo',
  props: {
    info: Object
  },
  components: {UploadImg, IconFont, BrowseIcon},
  data() {
    return {
      formData: {
        qrcode: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    handleSuccess(files, key) {
      this.formData[key] = files.response.url
    },
    handleRemove(files, key) {
      this.formData[key] = ''
    },
    handleSubmit() {
      agentEditApi(this.formData).then(res => {

      })
    }
  }
}
</script>

<style lang="less" scoped>
.approve-detail {
  width: 100%;
  padding-bottom: var(--td-comp-paddingTB-m);

  .img-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .prod-img2 {
    width: 90px;
    height: 90px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #e5e5e5;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .log-title {
    font-weight: 600;
    font-size: 16px;
    padding-bottom: 6px;
  }

  .log-desc {
    font-size: 14px;
  }

  .creation-time {
    font-size: 14px;
    padding-top: 4px;
    color: rgba(0, 0, 0, 0.45);
  }
}

</style>
